<template>
  <div class="content-updata">
    <nav-bar>
      <div slot="left" @click="toBack" class="left">
        <van-icon name="arrow-left" />
      </div>
      <div slot="center" class="center">个人信息</div>
      <div slot="right" class="right" @click="quitLogin">退出</div>
    </nav-bar>
    <div class="headimg-box">
      <div class="title">头像</div>
      <div class="img-content">
        <van-uploader
          :after-read="afterRead"
          :max-count="1"
          :name="0"
          :max-size="500 * 1024"
          @oversize="onOversize"
        >
          <div class="img-box">
            <van-image lazy-load :src="staticpath+header" v-if="header">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
            <img v-else src="~@/assets/img/headImg/defaultHead.jpg" />
          </div>
        </van-uploader>
      </div>
    </div>
    <div class="baswinfo-box">
      <div class="baswinfo-title">
        <p>基础信息</p>
        <p @click="toUpdataBaseInfo">修改信息></p>
      </div>
      <div class="showbaseinfo-box">
        <div>
          <p>昵称</p>
          <p v-if="nickName">{{nickName}}</p>
          <p v-else>未填写</p>
        </div>
        <div>
          <p>电话</p>
          <p v-if="telPhone">{{telPhone}}</p>
          <p v-else>未填写</p>
        </div>
        <div>
          <p>性别</p>
          <p v-if="gender">{{gender == 1 ? '男' : gender == 2 ? "女" : "保密"}}</p>
        </div>
        <div>
          <p>生日</p>
          <p v-if="birthday">{{birthday}}</p>
          <p v-else>未填写</p>
        </div>
        <div id="email-box">
          <p>邮箱</p>
          <p v-if="email">{{email}}</p>
          <p v-else>未填写</p>
        </div>
      </div>
    </div>
    <div class="safety-box">
      <div class="baswinfo-title">
        <p>账号与安全</p>
      </div>
      <div class="safety-updata-box">
        <div>
          <p>修改密码</p>
          <p @click="toUpdataPassword">
            点击修改密码
            <van-icon name="arrow" />
          </p>
        </div>
        <div id="zhuxiao-box">
          <p>注销账号</p>
          <p @click="toLogout">
            去注销
            <van-icon name="arrow" />
          </p>
        </div>
      </div>
    </div>
    <div class="logout-box-content">
      <div class="logout-box" @click="quitLogin">退出登录</div>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";

import { HeaderImg } from "network/uploadImg";
import { updataHeaderImg } from "network/user";

import { mapState, mapMutations } from "vuex";

export default {
  name: "",
  components: {
    NavBar,
  },
  data() {
    return {
      fileList: [],
      staticpath: localStorage.getItem("staticpath"),
    };
  },
  methods: {
    ...mapMutations({
      getHeader: "moduleUser/getHeader",
      getNickName: "moduleUser/getNickName",
      getId: "moduleUser/getId",
      getBirthday: "moduleUser/getBirthday",
      getEmail: "moduleUser/getEmail",
      getGender: "moduleUser/getGender",
      getTelPhone: "moduleUser/getTelPhone",
      getUserName: "moduleUser/getUserName",
    }),
    //回到登录页面
    toBack() {
      this.$router.push("mine");
    },
    //点击修改基础信息
    toUpdataBaseInfo() {
      // console.log(123);
      if (localStorage.getItem("userId")) {
        this.$router.push("/updatabaseinfo");
      } else {
        this.$router.push("/login");
      }
    },
    //点击注销账号
    toLogout() {
      // console.log('注销账号');
      this.$router.push("/logout");
    },
    //点击修改密码
    toUpdataPassword() {
      console.log("修改密码");
      this.$router.push("/updatapassword");
    },
    //上传图片到服务器
    afterRead(file) {
      let formdata = new FormData();
      formdata.append("files", file.file);
      HeaderImg(formdata).then((res) => {
        if (res.code == 200) {
          let id = this.userId;
          let header = res.data[0];
          updataHeaderImg({ id, header }).then((res) => {
            if (res.code == 200) {
              localStorage.setItem("header", header);
              this.getHeader(header);
            }
          });
        } else {
          this.$toast({
            message: "上传失败",
            position: "bottom",
          });
        }
      });
    },
    //限制图片上传大小
    onOversize(file) {
      this.$toast({
        message: "图片不能超过500kb~",
        position: "bottom",
      });
    },
    //退出登录
    quitLogin() {
      this.$router.push("/mine");
      let city = localStorage.getItem("city");
      let staticpath = localStorage.getItem("staticpath");
      let currentRentPath = localStorage.getItem("currentRentPath");
      let currentCity = localStorage.getItem("currentCity");
      localStorage.clear();
      localStorage.setItem("city", city);
      localStorage.setItem("staticpath", staticpath);
      localStorage.setItem("currentRentPath", currentRentPath);
      localStorage.setItem("currentCity", currentCity);
      this.getNickName("");
      this.getBirthday("");
      this.getEmail("");
      this.getGender("");
      this.getTelPhone("");
      this.getUserName("");
      this.getId();
      this.getHeader();
    },
  },
  computed: {
    ...mapState({
      header: (state) => state.moduleUser.header,
      nickName: (state) => state.moduleUser.nickName,
      telPhone: (state) => state.moduleUser.telPhone,
      email: (state) => state.moduleUser.email,
      gender: (state) => state.moduleUser.gender,
      userName: (state) => state.moduleUser.userName,
      birthday: (state) => state.moduleUser.birthday,
      userId: (state) => state.moduleUser.userId,
    }),
  },
};
</script>

<style scoped>
.content-updata {
  padding-top: 50px;
  background-color: #efefef;
  height: 100vh;
}
.center {
  color: #fff;
  font-size: 16px;
}
.left,
.right {
  font-size: 23px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.right {
  font-size: 14px;
}
.baswinfo-box,
.safety-box,
.headimg-box {
  margin: 15px 10px;
  background-color: #fff;
  border-radius: 20px;
  padding: 8px 15px;
  font-size: 16px;
}
.headimg-box {
  display: flex;
  justify-content: space-between;
  line-height: 50px;
  text-align: center;
}
.img-content {
  display: flex;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-right: 20px;
  border-radius: 50px;
  overflow: hidden;
}
.headimg-box .title {
  margin-left: 10px;
  font-weight: 700;
}

.van-uploader {
  height: 50px;
  width: 50px;
  width: 100%;
  height: 100%;
}
.img-box {
  height: 50px;
  width: 50px;
  margin-right: 40px;
}
.img-box img {
  height: 100%;
  width: 100%;
}
.baswinfo-title {
  font-weight: 550;
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
  margin-top: 18px;
}
.baswinfo-title p:nth-child(2) {
  font-size: 12px;
  font-weight: normal;
}
.showbaseinfo-box > div {
  display: flex;
  justify-content: space-between;
  height: 45px;
  margin-left: 10px;
  margin-right: 10px;
  padding-right: 5px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
  line-height: 48px;
}
.showbaseinfo-box > div p:nth-child(1) {
  font-weight: 550;
}

.showbaseinfo-box > div p:nth-child(2) {
  color: #666;
}
#email-box {
  border: none;
}
.safety-updata-box > div {
  display: flex;
  justify-content: space-between;
  height: 45px;
  margin-left: 10px;
  margin-right: 10px;
  padding-right: 5px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
  line-height: 45px;
}
#zhuxiao-box {
  border: none;
}
.safety-updata-box > div p:nth-child(1) {
  font-size: 14px;
  font-weight: 550;
}
.safety-updata-box .van-icon {
  font-size: 12px;
  line-height: 45px;
  color: #ccc;
}
.logout-box-content {
  position: relative;
}
.logout-box {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  height: 35px;
  background-color: #ff5654;
  width: 300px;
  border-radius: 35px;
  line-height: 35px;
  text-align: center;
  color: #fff;
}
</style>